<template>
  <el-dialog
    :visible.sync="visible"
    title=""
    :close-on-click-modal="false"
    :show-close="false"
    width="400px"
    center
    class="call-dialog"
  >
    <div class="call-container">
      <div class="caller-info">
        <img :src="callUser.avatar" :alt="callUser.name" class="caller-avatar">
        <h3 class="caller-name">{{ callUser.name }}</h3>
        <p class="call-status">
          <span v-if="callState === 'connecting'">正在呼叫...</span>
          <span v-if="callState === 'ringing'">对方正在接听...</span>
          <span v-if="callState === 'talking'">正在通话中... {{ formatDuration(duration) }}</span>
          <span v-if="callState === 'ended'">通话已结束</span>
        </p>
      </div>
      
      <div class="call-actions">
        <button 
          class="call-btn decline-btn"
          @click="handleDecline"
          v-if="callState !== 'ended'"
        >
          <i class="el-icon-phone"></i>
        </button>
        <button 
          class="call-btn accept-btn"
          @click="handleAccept"
          v-if="callState === 'connecting' && !isOutgoing"
        >
          <i class="el-icon-phone"></i>
        </button>
        <button 
          class="call-btn end-btn"
          @click="handleEndCall"
          v-if="callState === 'talking' || callState === 'ringing'"
        >
          <i class="el-icon-stop"></i>
        </button>
      </div>
      
      <div class="call-controls" v-if="callState === 'talking'">
        <button class="control-btn" @click="toggleMute">
          <i :class="isMuted ? 'el-icon-microphone-slash' : 'el-icon-microphone'"></i>
          <span>{{ isMuted ? '取消静音' : '静音' }}</span>
        </button>
        <button class="control-btn" @click="toggleSpeaker">
          <i :class="isSpeakerOn ? 'el-icon-volume-2' : 'el-icon-volume-1'"></i>
          <span>{{ isSpeakerOn ? '扬声器' : '听筒' }}</span>
        </button>
        <button class="control-btn" v-if="callType === 'video'">
          <i class="el-icon-video-camera"></i>
          <span>关闭视频</span>
        </button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    callType: {
      type: String,
      default: 'voice', // 'voice' 或 'video'
      validator: function(value) {
        return ['voice', 'video'].includes(value);
      }
    },
    callUser: {
      type: Object,
      required: true,
      default: () => ({
        id: null,
        name: '',
        avatar: ''
      })
    }
  },
  data() {
    return {
      callState: 'connecting', // 'connecting', 'ringing', 'talking', 'ended'
      isOutgoing: true, // 是否为 outgoing call
      duration: 0,
      callTimer: null,
      isMuted: false,
      isSpeakerOn: true
    };
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        // 开始通话计时
        if (this.callState === 'talking') {
          this.startCallTimer();
        }
      } else {
        // 停止计时
        this.stopCallTimer();
      }
    }
  },
  methods: {
    formatDuration(seconds) {
      const mins = Math.floor(seconds / 60);
      const secs = seconds % 60;
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    },
    
    startCallTimer() {
      if (this.callTimer) clearInterval(this.callTimer);
      
      this.callTimer = setInterval(() => {
        this.duration++;
      }, 1000);
    },
    
    stopCallTimer() {
      if (this.callTimer) {
        clearInterval(this.callTimer);
        this.callTimer = null;
      }
    },
    
    handleAccept() {
      this.callState = 'talking';
      this.startCallTimer();
      // 发送接受通话请求
      this.$emit('accept-call');
    },
    
    handleDecline() {
      this.callState = 'ended';
      this.stopCallTimer();
      this.$emit('decline-call');
      setTimeout(() => {
        this.$emit('update:visible', false);
      }, 1000);
    },
    
    handleEndCall() {
      this.callState = 'ended';
      this.stopCallTimer();
      this.$emit('end-call');
      setTimeout(() => {
        this.$emit('update:visible', false);
      }, 1000);
    },
    
    toggleMute() {
      this.isMuted = !this.isMuted;
      // 实际项目中这里会调用音视频API处理静音
    },
    
    toggleSpeaker() {
      this.isSpeakerOn = !this.isSpeakerOn;
      // 实际项目中这里会调用音视频API切换扬声器/听筒
    }
  },
  beforeDestroy() {
    this.stopCallTimer();
  }
};
</script>

<style scoped>
.call-dialog .el-dialog__header {
  display: none;
}

.call-dialog .el-dialog__body {
  padding: 20px 0;
}

.call-container {
  text-align: center;
}

.caller-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.caller-name {
  font-size: 20px;
  margin-bottom: 10px;
  color: #333;
}

.call-status {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

.call-actions {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
}

.call-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.2s;
}

.call-btn:hover {
  transform: scale(1.1);
}

.decline-btn {
  background-color: #f5f5f5;
  color: #f5222d;
  transform: rotate(135deg);
}

.accept-btn {
  background-color: #f6ffed;
  color: #52c41a;
}

.end-btn {
  background-color: #fff2f0;
  color: #f5222d;
}

.call-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.control-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  font-size: 12px;
}

.control-btn i {
  font-size: 20px;
  margin-bottom: 5px;
}
</style>
